<!--

@import-less url("../module-root.less");

#header {
  color: @brand_color;
  background: @module_color;
}

h2 {
  color: @brand_color;
}

/* This is a block comment */
// This is a line comment turned into a block comment

.rounded_corners(@radius: 5px, @thickness: 1px, @color: gray) {
  // a comment inside a LESS function definition
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius; // another comment inside a LESS function definition
  border-radius: @radius;
  border: @thickness solid @color;
}

.$module-top-panel.${theme} {
    color: white;
}
.$module-top-panel.${bad-var} {
}

#panel1 > div:first-child {
  // LESS function mix-in call with no arguments
  .rounded_corners;
}

#panel2 > div:first-child {
  // LESS function mix-in call with all arguments
  .rounded_corners(10px, 2px, black);
}

#panel3 > div:first-child {
  // LESS function mix-in call with some arguments
  .rounded_corners(10px);
}

#header {
  color: red;
  a {
    font-weight: bold;
    text-decoration: none;
    // Test relative URL resolution
    background: url( ../images/watermark.png );
    background: url("images/watermark.png");
    background: url(./images/watermark.png);
    background: url(/some-path/modules/$module/images/watermark.png);
    background: url('http://foo.com/bar.png');
    :hover {
        text-decoration: underline;
    }
  }
}

@the-border: 1px;
@base-color: #111;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}

#footer {
  // Test color arithmetics
  color: (@base-color + #111) * 1.5;
  color: gray;
  color: gray + 50%;
  color: gray * 2;
  color: rgba(10%, 40%, 100%, 0.2) / 2;
}

@media print {
    @brand-color: white;
    
    // Test an inner block
    body {
        color: @brand-color;
    }
    
    // Test another inner block, which should still be nested
    h1 {
        font-weight: bold;
        a:hover {
            text-decoration: none;
        }
    }
}

-->